<template>
  <div>

    <div class="jx_data">
      <Row :gutter="16">
        <Col span="9" class="jx_select" order="4">
          <Select v-model="queryInfo.inforomationsort"  @on-change="getData">
            <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
            <Option v-for="item in indexList" :value="item.value"  :key="item.id">{{ item.label }}</Option>
          </Select>
        </Col>

        <!-- 搜索 -->
        <Col span="9">
          <Input v-model="queryInfo.query" placeholder="请输入需要搜索的内容" 
            prefix="ios-search" @on-clear="setValueNull" 
            @keydown.enter.native="getData" 
            clearable/>
        </Col>
        <Col span="6" >
           <b-button variant="primary" @click="modal1 = true" class="jx_serach_button">+<i class="el-icon-upload el-icon--right"></i></b-button>
        </Col>
      </Row>

      <Modal
        v-model="modal1"
        title="上传资源"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form :model="cloudForm" :label-width="80">
          <FormItem label="名称">
            <Input v-model="cloudForm.name" placeholder="请输入上传资源的名称"></Input>
          </FormItem>
          <FormItem label="链接地址">
            <Input v-model="cloudForm.url" placeholder="请输入链接地址"></Input>
          </FormItem>
          <FormItem label="提取码">
            <Input v-model="cloudForm.extract_code" placeholder="请输入提取码"></Input>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="cloudForm.remark" placeholder="请输入备注"></Input>
          </FormItem>
        </Form>
      </Modal>
    </div>


      <el-table
        class="jx_table"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
        :data="tableData"
        :row-style="{ height: '0px' }"
        v-loading="loading"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="资源名字">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="资源链接"
         >
          <template class="table_url" slot-scope="scope">
            {{scope.row.url}}
            <el-button style="color: #409EFF;" type="text" @click="handleCopyLink(scope.row.url)"><Button type="primary" shape="circle" icon="md-albums"></Button></el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="extract_code"
          label="提取码">
          <template class="table_url" slot-scope="scope">
            {{scope.row.extract_code}}
            <el-button type="text" @click="handleCopyLink(scope.row.extract_code)"><Button type="success" shape="circle" icon="md-albums"></Button></el-button>
          </template>
        </el-table-column>
        </el-table-column>

      </el-table>
      
      <p class="hint" v-if="!isFinal" @click="moreArticle">加载更多......</p>
      <p class="hint" v-if="isFinal">没有更多了</p>

      <!-- <el-pagination
        class="jx_page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="queryInfo.pageSize"
        :total="total"
        >
      </el-pagination> -->
  </div>
</template>

<script>
import { getStudyData, insertStudyData, getIndexData } from '~/api/data' 
export default {
  data(){
    return{
      queryInfo: {
        pageNum: 1,
        pageSize: 8,
        query: '',
        inforomationsort: '',
        display: 1,
      },
      scrollY: 1000,
      total: null,
      modal1: null,
      isFinal: false,
      //分类数据
      tableData: [],
      currentPage: 1,
      cloudForm: {
        name: '',
        url: '',
        extract_code: '',
        remark: '',
        display: 0
      },
      loading: false,
      indexList: []
  }
},
  methods:{
    async getData() {
      this.loading = true;
      return getStudyData(this.queryInfo).then(data => {
        this.tableData = data.data;
        this.loading = false;
      })
    },
    async getIndex() {
      return getIndexData().then(data => {
        data.data.forEach(element => {
        let object = {
          value: element.inforomationsort,
          label: element.name,
        }
        this.indexList.push(object)
       })
      })
      console.log(this.indexList);
    },
    setValueNull(){
      this.getData();
    },
    async moreArticle(){
      this.loading = true;
      ++this.queryInfo.pageNum;
      return getStudyData(this.queryInfo).then(data => {
        this.tableData = this.tableData.concat(data.data);
        scrollTo(0,this.scrollY);
        this.scrollY = this.scrollY + 500;
        if(data.numbers == this.tableData.length){
          this.isFinal = true;
        }
       
        this.loading = false;
      })
    },
    // 页码发生改变时
    handleSizeChange(size) {
      this.queryInfo.pageSize = size
      this.getData();
    },
    handleCopyLink(row) {
      let _this = this;
      this.$copyText(row).then(function (e) {
        _this.$message({
          showClose: true,
          message: "复制成功",
          type: "success"
        });
      }, function (e) {
        _this.$message({
          showClose: true,
          message: "复制失败，请手动复制",
          type: "error"
        });
      })
    },

    // 当前页数发生改变时
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNum = currentPage
      this.getData();
    },
    async ok () {
      return insertStudyData(this.cloudForm).then(data => {
        if(data == 'success'){
          this.$Message.success('发送成功，请等待管理员审核通过');
        }
        this.cloudForm.name = ''
        this.cloudForm.url = ''
        this.cloudForm.extract_code = ''
        this.cloudForm.remark = ''
      })

    },
    cancel () {
      this.$Message.info('取消上传资源');
    },
 },
 created() {
   this.getData();
   this.getIndex();
 }
}
</script>

<style lang="scss" scoped>
.jx_data{
  height: 100px;
  line-height: 100px;
  .jx_select{
    animation: lightSpeedIn; 
    animation-duration: 2s; 
  }
  .jx_serach_button{
    animation: rotateInDownRight; 
    animation-duration: 2s; 
    margin-left: 30px;
  }
}

.jx_table{
  animation: fadeInUp; 
  animation-duration: 2s;
  /deep/th{
    padding: 10px 0 !important;
  }
  /deep/td{
    padding: 6px 0 !important;
  }
  /deep/.table_url{
    width: 50px;
    height: 50px;
    overflow:hidden;
    text-overflow:ellipsis; 
    background: goldenrod;
    white-space: nowrap;/*加宽度width属来兼容部分浏览*/
    animation: bounceInLeft; 
    animation-duration: 2s;
  } 
}
.jx_page{
  animation: zoomIn; 
  animation-duration: 2s; 
  width: 80%;
}
.hint{
  text-align: center;
  font-size: 25px;
  color: #8e8e8e;
  padding: 40px;
}

</style>